<script setup lang="ts">
  import { ref } from 'vue'
  import { onLoad, onUnload } from '@dcloudio/uni-app'
  import { shortorderdetail } from '@/api/dict/detail'
  import { serializeUrlParams } from '@/utils'
  import otaImgPreview from '@/components/ota-img-preview.vue'
  import otaVideoPreview from '@/components/ota-video-preview.vue'
  const memberInfoDto = ref({})
  const orderInfo = ref({})
  const initExpand = ref(true)
  const initExpandinfo = ref(true)
  const initExpandHandover = ref(false)
  const initExpandReturn = ref(false)
  const props = defineProps({
    orderId: {
      type: String || Number,
    },
  })
  const getDetail = async (id: any) => {
    const res = await shortorderdetail({ id: id })
    const result: any = res.result
    memberInfoDto.value = result.memberInfoDto || {}
    orderInfo.value = result.orderInfo
  }
  // 上传驾驶证点击
  const uploadDriverLicenseFn = () => {
    let url = '/pages/order/upload-driver-license?'
    let urlParams = {
      memberId: memberInfoDto.value.id,
      driverFrontFileId: memberInfoDto.value.driverFrontFileId,
      driverReverseFileId: memberInfoDto.value.driverReverseFileId,
      autoUpload: true,
    }
    url += serializeUrlParams(urlParams)
    uni.navigateTo({ url: url })
  }
  onLoad(() => {
    console.log(props.orderId)
    if (props.orderId) {
      getDetail(props.orderId)
    }
    // 车型选择完成
    uni.$on('uploadDriverLicenseOk', (option) => {
      const { driverFrontFileId, driverReverseFileId } = option
      // 更新驾驶证正反面 id
      memberInfoDto.value.driverFrontFileId = driverFrontFileId
      memberInfoDto.value.driverReverseFileId = driverReverseFileId
    })
    uni.$on('uploadIdCardOk', (option) => {
      const { idCardFrontFileId, idCardReverseFileId, cardType } = option
      // 更新身份证明正反面 id
      memberInfoDto.value.idCardFrontFileId = idCardFrontFileId
      memberInfoDto.value.idCardReverseFileId = idCardReverseFileId
      // 更新证件类型
      memberInfoDto.value.cardType = cardType
      memberInfoDto.value.cardTypeName = cardType == 0 ? '身份证' : '护照'
    })
  })
  onUnload(() => {
    uni.$off('uploadDriverLicenseOk')
    uni.$off('uploadIdCardOk')
  })
</script>

<template>
  <view class="detail-container">
    <ve-card title="客户信息" type="none" fold="true" v-model:initFold="initExpand">
      <ve-cell label="客户类型">{{ orderInfo.memberTypeName || '-' }}</ve-cell>
      <ve-cell label="承租人">{{ orderInfo.memberName || '-' }}</ve-cell>
      <ve-cell label="联系电话">{{ orderInfo.memberPhone || '-' }}</ve-cell>
      <ve-cell label="证件类型">{{ memberInfoDto.cardTypeName || '-' }}</ve-cell>
      <ve-cell label="证件号">{{ orderInfo.cardNumber || '-' }}</ve-cell>
    </ve-card>
    <ve-card title="租赁信息" type="none" fold="true" v-model:initFold="initExpandinfo">
      <template #status>
        <view class="card__status" v-if="orderInfo.orderStatusName">{{ orderInfo.orderStatusName }}</view>
      </template>
      <ve-cell label="自营订单号">{{ orderInfo.orderCode || '-' }}</ve-cell>
      <ve-cell label="订单来源">{{ orderInfo.orderSourceName || '-' }}</ve-cell>
      <ve-cell label="订单渠道">{{ orderInfo.channelTypeName || '-' }}</ve-cell>
      <ve-cell label="渠道单号" v-if="orderInfo.orderSource == 2">{{ orderInfo.channelOrderCode }}</ve-cell>
      <ve-cell label="订单获取方式">{{ orderInfo.orderAcquisitionTypeName || '-' }}</ve-cell>
      <ve-cell label="预计租赁周期">{{ orderInfo.startTime }} - {{ orderInfo.endTime }}</ve-cell>
      <ve-cell label="租期">{{ orderInfo.rentDays || '-' }}</ve-cell>
      <ve-cell label="车型">{{ orderInfo.originalSiteModelName || '-' }}</ve-cell>
      <ve-cell label="取车门店">{{ orderInfo.siteName || '-' }}</ve-cell>
      <ve-cell label="上门送车地址">{{ orderInfo.address || '-' }}</ve-cell>
      <ve-cell label="还车门店">{{ orderInfo.returnSiteName || '-' }}</ve-cell>
      <ve-cell label="上门取车地址">{{ orderInfo.returnAddress || '-' }}</ve-cell>
      <ve-cell label="车辆来源">{{ orderInfo.carSourceName || '-' }}</ve-cell>
      <ve-cell label="车牌号">
        <text
          >{{ orderInfo.carLicenseNo || '-' }} <ve-tag color="red" v-if="orderInfo.orderCarLabel" :title="orderInfo.orderCarLabel" />
        </text>
      </ve-cell>
      <ve-cell label="交车车型">{{ orderInfo.carModelName || '-' }}</ve-cell>
      <ve-cell label="实际租赁周期">{{ orderInfo.actualStartTime }} - {{ orderInfo.actualEndTime }}</ve-cell>
      <!-- 取消状态 -->
      <ve-cell-val label="取消时间" v-if="orderInfo.orderStatus == -100" :value="orderInfo.cancelTime" />
      <ve-cell-val label="超时时长" :value="orderInfo.overTimeStr" />
      <ve-cell label="订单备注">{{ orderInfo.remark || '-' }}</ve-cell>

      <template v-if="orderInfo.orderSource == 2">
        <ve-cell label="渠道车牌号">{{ orderInfo.channelCarLicenseNo || '-' }}</ve-cell>
        <ve-cell label="渠道车型">{{ orderInfo.channelModelName || '-' }}</ve-cell>
        <ve-cell label="渠道取车门店">{{ orderInfo.channelSiteName || '-' }}</ve-cell>
        <ve-cell label="渠道还车门店">{{ orderInfo.channelReturnSiteName || '-' }}</ve-cell>
      </template>
    </ve-card>
    <ve-card title="交车信息" type="none" fold="true" v-model:initFold="initExpandHandover" v-if="orderInfo.giveCarInfoDto">
      <ve-cell label="交车里程">{{ orderInfo.giveCarInfoDto.startCarMileage || '-' }}公里</ve-cell>
      <ve-cell-val label="交车油(电)量" :value="orderInfo.giveCarInfoDto.startCarOil" />
      <ve-cell label="交车人">{{ orderInfo.giveCarInfoDto.giveStaffName || '-' }}</ve-cell>
      <ve-cell label="交车时间">{{ orderInfo.giveCarInfoDto.useStartTime || '-' }}</ve-cell>
      <ve-cell label="交车照片" layout="vertical">
        <ve-upload disabled v-model="orderInfo.giveCarInfoDto.giveFileIds"></ve-upload>
      </ve-cell>
      <ve-cell label="OTA交车照片" layout="vertical">
        <otaImgPreview :urlList="orderInfo.giveCarInfoDto.giveOtaFileUrls" />
      </ve-cell>
      <ve-cell label="交车视频" layout="vertical">
        <ve-upload-video v-model="orderInfo.giveCarInfoDto.giveVideoFileIds" :readonly="true" />
      </ve-cell>
      <ve-cell label="OTA交车视频" layout="vertical">
        <otaVideoPreview :urlList="orderInfo.giveCarInfoDto.giveVideoOtaFileUrls" />
      </ve-cell>
      <ve-cell label="交车备注">{{ orderInfo.giveCarInfoDto.useStartRemark || '-' }}</ve-cell>
    </ve-card>
    <ve-card title="还车信息" type="none" fold="true" v-model:initFold="initExpandReturn" v-if="orderInfo.returnCarInfoDto">
      <ve-cell label="还车里程">{{ orderInfo.returnCarInfoDto.endCarMileage || '-' }}公里</ve-cell>
      <ve-cell-val label="还车油(电)量" :value="orderInfo.returnCarInfoDto.endCarOil" />
      <ve-cell label="还车人">{{ orderInfo.returnCarInfoDto.returnStaffName || '-' }}</ve-cell>
      <ve-cell label="还车时间">{{ orderInfo.returnCarInfoDto.useEndTime || '-' }}</ve-cell>
      <ve-cell label="还车照片" layout="vertical">
        <ve-upload disabled v-model="orderInfo.returnCarInfoDto.returnFileIds"></ve-upload>
      </ve-cell>
      <ve-cell label="OTA还车照片" layout="vertical">
        <otaImgPreview :urlList="orderInfo.returnCarInfoDto.returnOtaFileUrls" />
      </ve-cell>
      <ve-cell label="还车视频" layout="vertical">
        <ve-upload-video v-model="orderInfo.returnCarInfoDto.returnVideoFileIds" :readonly="true" />
      </ve-cell>
      <ve-cell label="OTA还车视频" layout="vertical">
        <otaVideoPreview :urlList="orderInfo.returnCarInfoDto.returnVideoOtaFileUrls" />
      </ve-cell>
      <ve-cell label="还车备注">{{ orderInfo.returnCarInfoDto.useEndRemark || '-' }}</ve-cell>
    </ve-card>
  </view>
</template>

<style lang="scss" scoped>
  .detail-container {
    padding: 24rpx;
  }
  .card__status {
    text-align: center;
    font-size: 24rpx;
    color: #ffffff;
    height: 36rpx;
    padding: 0 16rpx;
    line-height: 36rpx;
    margin-left: 16rpx;
    background: linear-gradient(58deg, #ff5b60 0%, #ff7a66 100%);
    border-radius: 50rpx;
  }
  .update {
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    opacity: 1;
    border: 2rpx solid #3072f6;
    font-size: 24rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #3072f6;
    line-height: 44rpx;
    margin-left: 16rpx;
    padding: 0 16rpx;
    word-break: keep-all;
  }
  .footerback {
    position: fixed;
    z-index: 999;
    width: 100%;
    bottom: 0;
    left: 0;
    background: #fff;
    padding: 24rpx;
  }
</style>
